<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四边阴影</title>
        <style type="text/css">
            .shadow {
                width: 500px ;
                height: 200px ;
                margin: 100px auto ;
                border: 1px solid blue ;
                /* 水平偏移   垂直偏移    模糊距离   阴影距离  阴影颜色 */
                box-shadow: 0  -10px 15px -10px blue ,
                                    10px  0 15px -10px red ,
                                    0  10px 15px -10px green ,
                                    -10px  0 15px -10px orange ;
            }
        </style>
    </head>
    <body>
        <div class="shadow"></div>
    </body>
</html>